<template>
	<view>
		<view class="state-box">
			<view class="">
				<view class="headline">
					<view class="headline-left">
						ML202306120003-压缩机
					</view>
				</view>
				<view class="information">
					设备型号：2023/06/12 10:56:29
				</view>
				<view class="information">
					设备类型：哇塞
				</view>
				<view class="information">
					所在位置：哇塞
				</view>
				<u-tabs @click="cut" :scrollable="false" :list="list" lineWidth="60"
					lineColor="linear-gradient(90deg, rgba(56, 222, 255, 1) 0%, rgba(56, 175, 255, 1) 100%)"
					:activeStyle="{
				            color: 'rgba(56, 222, 255, 1)',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#d2d3d9',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
				</u-tabs>
			</view>
		</view>
		<!-- 基本信息 -->
		<view class="malfunction-repairs" v-if="index === 0">
			<view class="">
				<span class="span1">设备品牌：</span><span class="span2">{{basicInformation.machineryBrand}}</span>
			</view>
			<view class="">
				<span class="span1">购买日期：</span><span class="span2">{{basicInformation.buytime}}</span>
			</view>
			<view class="">
				<span class="span1">保修期限：</span><span class="span2">{{basicInformation.warrantyPeriod}}个月</span>
			</view>
			<view class="">
				<span class="span1">供&nbsp; 应&nbsp; 商：</span><span class="span2">{{basicInformation.supplier}}</span>
			</view>
			<view class="">
				<span class="span1">启动日期：</span><span class="span2">{{basicInformation.createTime}}</span>
			</view>
			<view class="">
				<span class="span1">所在位置：</span><span class="span2">{{basicInformation.workshopName}}</span>
			</view>
			<view class="">
				<span class="span1">管&nbsp;&nbsp;理&nbsp;&nbsp;员：</span><span
					class="span2">{{basicInformation.charger}}</span>
			</view>
			<view class="" style="opacity: 0.3;border-bottom: 1rpx solid #bcbdc5;">

			</view>
			<view class="">
				<span class="span1">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 注：</span><span
					class="span2">{{basicInformation.remark}}</span>
			</view>
			<view class="">
				<span class="span1">附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 件：</span><span
					class="span2">{{basicInformation.attr1}}</span>
			</view>
		</view>
		<!-- 报修单 -->
		<view class="" v-if="index === 1">
			<view class="state-box" v-for="(item,index) in formData" :key="index">
				<view class="" @click="repairs((item.repairId))">
					<view class="information">
						维修编号：{{item.repairCode}}
					</view>
					<view class="information">
						设备型号：{{item.machinerySpec}}
					</view>
					<view class="information">
						报修时间：{{item.requireDate}}
					</view>
					<view class="state-show">
						<text>已完成</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 保养单 -->
		<!-- <view v-if="index === 2">
			<view class="container">
				<u-steps dot direction="column" :current="active" class="stepbox">
					<u-steps-item v-for="(item,index) in stepList" :key="index">
						<view class="topbox" slot="desc">
							<view class="stepTitle">
								<view :class="item.stat=='0'?'textColor':'textColore'">{{item.state}}</view>
								<view class="stepTitle-clor" style="">{{item.date}}</view>
							</view>
							<view class="itembox">
								<view class="d-flex u-flex-row justify-content-between">
									<view class="huise">{{item.workName}}</view>
									<view>{{item.operate}}</view>
								</view>
								<view class="font-size-sm text-color-assist item">
									<view><span class="huise">维修人员：</span><span class="heise">{{item.workName}}</span>
									</view>
									<view><span class="huise">维修人员：</span><span class="heise">{{item.workName}}</span>
									</view>
									<view><span class="huise">维修人员：</span><span class="heise">{{item.workName}}</span>
									</view>
								</view>
							</view>
						</view>
					</u-steps-item>
				</u-steps>
			</view>
		</view> -->
		<!-- 点巡检单 -->
<!-- 		<view class="state-box" v-if="index === 3">
			<view class="" @click="polling">
				<view class="headline">
					<view class="headline-left">
						ML202306120003-压缩机
					</view>
				</view>
				<view class="information">
					任务编号：KUIOB202306210016
				</view>
				<view class="information">
					设备型号：KUIOB2
				</view>
				<view class="information">
					所在位置：这是一个地址
				</view>
				<view class="information">
					创建时间：2023/06/12 10:56:29
				</view>

				<view class="state-show">
					<text>待验证</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		getParticulars,
		getList
	} from '@/api/facilityInformation/book.js'
	import {
		getStatus
	} from '@/api/facilityMaintain/index.js'
	export default {
		data() {
			return {
				checkList: [], //点检
				formData: [],
				total: '',
				basicInformation: {}, //基本信息
				active: 2,
				index: 0,
				list: [{
					name: '基本信息',
				}, {
					name: '报修单',
				}],
				status: [],
				page: {
					machineryId: '',
					status: 'FINISHED',
					pageNum: 1,
					pageSize: 10,
				}, //页码数
				// stepList: [{
				// 		id: '0',
				// 		state: '报修',
				// 		date: '2023.04.11 10:22:01',
				// 		workName: '冯宝宝',
				// 		operate: '',
				// 		productNum: '2013ASDE433dd',
				// 		goodNum: "200",
				// 		defectNum: '50',
				// 		reason: '设备维修中'
				// 	},
				// 	{
				// 		id: '1',
				// 		state: '验证',
				// 		date: '2023.06.22 11:32:45',
				// 		workName: '冯宝宝',
				// 		operate: '',
				// 		productNum: '2013ASDE433dd',
				// 		goodNum: "200",
				// 		defectNum: '50',
				// 		reason: '人员不足'

				// 	},
				// 	{
				// 		id: '2',
				// 		state: '维修',
				// 		date: '2023.08.04 13:01:31',
				// 		workName: '冯宝宝',
				// 		operate: '',
				// 		productNum: '2013ASDE433dd',
				// 		goodNum: "200",
				// 		defectNum: '50',
				// 		reason: '设备数量过少'
				// 	},
				// 	{
				// 		id: '3',
				// 		state: '已完成',
				// 		date: '2023.09.20 08:10:28',
				// 		workName: '冯宝宝',
				// 		operate: '',
				// 		productNum: '2013ASDE433dd',
				// 		goodNum: "200",
				// 		defectNum: '50',
				// 		reason: '人员不足'
				// 	},
				// ],

			};
		},
		onLoad(options) {
			this.getParticulars(options.id)
		},
		methods: {
			// 获取设备详情
			getParticulars(id) {
				getParticulars(id).then(res => {
					this.basicInformation = res.data
				})
				getList(id).then(data => {
					console.log(data);
					data.rows.forEach(item => {
						// CHECK代表点检任务
						if (item.planType == 'CHECK') {
							this.checkList.push(item)
						}
					})
					console.log(this.checkList);
				})
				this.page.machineryId = id
				getStatus(this.page).then(res => {
					res.rows.forEach(item => {
						this.status.forEach(data => {
							if (item.status == data.dictValue) {
								item.status = data.dictLabel
							}
						})
					})
					this.formData = res.rows
					this.total = res.total
				})
			},
			cut(data) {
				this.index = data.index
			},
			change() {
				if (this.active < this.list2.length - 1) {
					this.active += 1
				} else {
					this.active = 0
				}
			},
			// 巡检详情
			polling() {
				uni.navigateTo({
					url: '/pages/facilityInformation/pollingDetails/index'
				})
			},
			// 报修详情
			repairs(repairId) {
				uni.navigateTo({
					url: `/pages/facilityMaintain/details/index?repairId=${repairId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-tabs__wrapper__nav__line {
		width: 104rpx !important;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		padding-left: 24rpx !important;
	}

	.state-box {

		margin: 32rpx 32rpx 48rpx 32rpx;
		padding: 48rpx 32rpx 64rpx 32rpx;
		// height: 450rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 20rpx rgba(32, 37, 64, 0.06);

		.information {
			opacity: 0.3;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 1);
			margin-bottom: 32rpx;
		}

		.headline {
			margin-bottom: 32rpx;
			display: flex;
			justify-content: space-between;
			height: 38rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 38rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
			vertical-align: top;
		}

		.state-show {
			display: flex;

			text {
				text-align: center;
				line-height: 36rpx;
				width: 112rpx;
				height: 36rpx;
				opacity: 1;
				border-radius: 8rpx;
				background: linear-gradient(90deg, rgba(121, 242, 170, 0.1) 0%, rgba(64, 219, 126, 0.1) 100%);
				color: rgba(75, 235, 139, 1);
				font-size: 20rpx;
			}
		}
	}

	// 故障报修样式
	.malfunction-repairs {
		padding: 0rpx 32rpx 32rpx 32rpx;

		view {
			margin-bottom: 32rpx;
		}

		.span1 {
			height: 30rpx;
			opacity: 0.3;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 30rpx;
			color: rgba(32, 37, 64, 1);
			text-align: right;
		}

		.span2 {
			height: 30rpx;
			opacity: 1;
			/** 文本1 */
			font-size: 24rpx;
			font-weight: 400;
			line-height: 30rpx;
			color: rgba(32, 37, 64, 1);
			text-align: left;
		}
	}

	// 步骤条样式
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.container {
		width: 100%;
		box-sizing: border-box;

		.title {
			background: #fff;
			line-height: 80rpx;
			padding-left: 20rpx;
		}

		.stepbox {
			padding: 40rpx;

			.topbox {
				width: 100%;
				padding-top: 2px;

				.stepTitle {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					font-size: 26rpx;

					.stepTitle-clor {
						color: #dbd3db !important;
					}

					.textColor {
						color: #307AF0;
					}

					.textColore {
						color: #333333;
					}
				}

				.itembox {
					width: 550rpx;
					background: #fff;
					margin: 20rpx;
					display: flex;
					flex-direction: column;
					border-radius: 20rpx;
					padding: 30rpx 70rpx 30rpx 30rpx;

					.item {
						margin-top: 20rpx;
						line-height: 50rpx;

						text {
							// color: blue;

							margin-right: 6rpx;

						}
					}
				}
			}

		}

	}

	.huise {
		color: #d2d3d9 !important;
	}

	.heise {
		color: rgb(32, 37, 64) !important;
	}

	::v-deep .u-steps-item__wrapper {
		background: #E2E7F5;
		border-radius: 30rpx;
	}

	::v-deep .u-steps-item__line--column {
		height: 280rpx !important;
		top: 50rpx !important;
	}

	::v-deep .u-tabs__wrapper__nav__item__text {
		font-size: 12px;
	}
</style>